<template>
	<view class="pageview">
		<cl-navbar leftIconSize="40rpx" placeholder title="" autoBack>
		</cl-navbar>
		<view class="contentview">
			<u-form labelPosition="top" :model="fromData" labelWidth='400rpx' :rules="rules" ref="uForm" :borderBottom="false" :labelStyle="{fontSize: '30rpx',color: '#FFFFFF'}">
				<u-form-item :label="$t('chat.report.intro')" prop="title" :borderBottom="false" required>
					<u-input
						:customStyle="{backgroundColor:'#1E1F30',height:'110rpx',padding:'0 30rpx',borderRadius: '20rpx'}"
						fontSize="28rpx"
						color="#ffffff"
						:placeholder="$t('chat.report.type.tipIntro')"
						:adjustPosition="false"
						placeholderStyle="font-size:28rpx; font-weight:normal;color: #909298;"
					    border="none"
						v-model="fromData.title"
					  ></u-input>
				</u-form-item>
				<u-form-item :label="$t('chat.report.type.descProof')" prop="content" :borderBottom="false" required>
					<u-textarea 
						v-model="fromData.content" border="none" count	
						height="500rpx"
						maxlength="200"
						:customStyle="{backgroundColor:'#1E1F30',fontSize:'28rpx'}"
						:placeholder="$t('chat.report.type.tipDescProof')"
						placeholderStyle="font-size:28rpx; font-weight:normal;color: #909298;"
						:adjustPosition="false">
					</u-textarea>
				</u-form-item>
				<u-form-item prop="imageList">
					<u-upload
						width="210rpx"
						height="210rpx"
						:fileList="fromData.imageList"
						@afterRead="afterRead"
						@delete="deletePic"
						multiple
						uploadIconColor="#909298"
						:previewFullImage="true"
						:maxCount="3">
					</u-upload>
				</u-form-item>
			</u-form>
			<u-button
				type="primary"
				:text="$t('chat.report.type.submit')"
				customStyle="margin-top: 30px"
				:loading="loading"
				@click="submit"
			></u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				fromData: {
					title: '',
					content:'',
					imageList:[]
				},
				loading:false,
				rules: {
					'title': {
						type: 'string',
						required: true,
						message: this.$t("chat.report.type.tipIntroText"),
						trigger: ['blur', 'change']
					},
					'content': {
						type: 'string',
						required: true,
						message: this.$t("chat.report.type.tipDescText"),
						trigger: ['blur', 'change']
					},
					'imageList': {
						type: 'array',
						required: true,
						min: 1,
						message: this.$t("chat.report.type.tipProofText"),
						trigger: ['change']
					}
				},
			};
		},
		computed: {
			...mapState({
				chatInfo: state => state.chat.chatInfo
			}),
		},
		onLoad(options) {
			console.log(this.chatInfo);
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this.fromData.imageList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this.fromData.imageList.length
				lists.map((item) => {
					this.fromData.imageList.push({
						...item,
						status: 'uploading',
						message: this.$t("chat.report.type.upload")
					})
				})
				for (let i = 0; i < lists.length; i++) {
					//上传
					// const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fromData.imageList[fileListLen]
					this.fromData.imageList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: '111.png'
					}))
					fileListLen++
				}
			},
			submit() {
				this.$refs.uForm.validate().then(async res => {
					try{
						if(this.loading)return
						this.loading = true
						let images = this.fromData.imageList.map(item=>item.url)
						let res = await uni.$api.common.complaintAdd({
							...this.fromData,
							imageList:images,
							complaint_object:this.chatInfo.chat_type,
							object_id:this.chatInfo.uuid
						})
						if(res){
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							setTimeout(()=>{
								this.$Router.back()
							},1000)
						}
					}catch(e){
						//TODO handle the exception
					}finally{
						this.loading = false
					}
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.contentview{
		padding: 0 35rpx;
	}
</style>